<script setup lang="ts">
import {onMounted, ref} from 'vue';

const url = 'https://www.photopea.com/';
const web = ref<any>(null);
const webUrl = ref<string>('')
const webScript = ref<string>('');
const webCss = ref<string>('');
const dialogVisible = ref<boolean>(false)
onMounted(() => {
    web.value.addEventListener('dom-ready', () => {
        console.log('DomReady', {url: webUrl.value, script: webScript.value});
        if (webUrl.value) {
            web.value.loadURL(webUrl.value)
            webUrl.value = ''
        } else if (webScript.value || webCss.value) {
            if (webCss.value) {
                fetch(webCss.value).then(response => response.text()).then(css => {
                    console.log('Injecting CSS', css);
                    web.value.insertCSS(css);
                });
                webCss.value = '';
            }
            if (webScript.value) {
                fetch(webScript.value).then(response => response.text()).then(script => {
                    console.log('Injecting JS', script);
                    web.value.executeJavaScript(script);
                });
                webScript.value = ''
            }
        }
    });
    webUrl.value = url;
    webScript.value = 'inject.js';
    webCss.value = 'inject.css';
});
if (window.focusany) {
    focusany.onMoreMenuClick(data => {
        switch (data.name) {
            case 'debug':
                if (web.value.isDevToolsOpened()) {
                    web.value.closeDevTools();
                } else {
                    web.value.openDevTools({
                        mode: 'detach',
                        activate: true,
                        title: 'Debug Web Offline Example',
                    });
                }
                break
        }
    })
    // @ts-ignore
    focusany.detach.setOperates([
        {
            name: 'desc',
            title: '使用说明',
            click: () => {
                dialogVisible.value = true
            }
        }
    ])
    focusany.setRemoteWebRuntime({
        userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
        types: [
            'js', 'css', 'png', 'webp', 'zip', 'woff2', 'json', 'wasm', 'otf',
            'html'
        ],
        domains: [
            'www.photopea.com',
            'vecpea.com',
            'fonts.gstatic.com',
        ],
        urlMap: {
            'https://www.photopea.com/': 'page.html',
        },
        blocks: [
            '/.*/'
        ]
    })
}
</script>

<template>
    <div style="height:100vh;width:100vw;overflow:hidden;">
        <webview ref="web"
                 src="about:blank"
                 allowpopups
                 disablewebsecurity
                 partition="<Photopea:RemoteWeb>"
                 useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3"
                 webpreferences="nodeIntegration=no,contextIsolation=no,sandbox=no,webSecurity=no,allowRunningInsecureContent=yes,allowDisplayingInsecureContent=yes"
                 class="webview"></webview>
        <a-modal title="使用说明"
                 width="60%"
                 height="60%"
                 :visible="dialogVisible"
                 title-align="start"
                 :footer="false"
                 @click="dialogVisible=false"
                 :closable="true">
            <div>
                <p>目前所有功能均与官网保持一直，如果有什么问题可反馈给我们。</p>
                <p>更多功能可访问官网 <a :href="url" target="_blank">{{ url }}</a> 。</p>
            </div>
        </a-modal>
    </div>
</template>


<style lang="less">
.webview {
    width: calc(100vw + 180px);;
    height: 100%;
    border: none;
}
</style>
